<template>
    <el-container>
        <el-header>
            <div class="left">
                XXX公司 - CMS 管理系统
            </div>
            <div class="right">
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                <el-dropdown>
                    <span class="el-dropdown-link">管理员<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-plus">个人中心</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-plus">个人设置</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-circle-check">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">

                <el-menu
                        :router="true"
                        default-active="/admin/user/list"
                        :unique-opened="true"
                        :default-openeds="['/admin', '/admin/user/list']"
                        class="el-menu-vertical-demo"
                >
                    <el-submenu index="/admin">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>用户管理</span>
                        </template>

                        <el-menu-item-group>
                            <el-menu-item class="nav-item" index="/admin/user/list"><i
                                    class="el-icon-s-unfold"></i> 用户列表
                            </el-menu-item>
                            <el-menu-item class="nav-item" index="1-2"><i class="el-icon-s-operation"></i>角色列表
                            </el-menu-item>
                        </el-menu-item-group>

                    </el-submenu>

                    <el-submenu index="/order">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>订单管理</span>
                        </template>

                        <el-menu-item-group>
                            <el-menu-item class="nav-item" index="/admin/order/list"><i class="el-icon-s-unfold"></i> 订单列表
                            </el-menu-item>
                            <el-menu-item class="nav-item" index="2-2"><i class="el-icon-s-operation"></i>订单评论
                            </el-menu-item>
                        </el-menu-item-group>

                    </el-submenu>
                </el-menu>

            </el-aside>
            <el-main>
                <!--二级路由的出口-->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped lang="less">

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {

        }

        .right {

        }
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;

        .nav-item {
            padding-left: 60px !important;
        }
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }

    .el-container {
        height: 100%;
    }


</style>
